<script lang="ts" setup>
import type { CalendarEvent } from './Calendar.vue'
import Calendar from './Calendar.vue'
import { StudentApi } from '@/apis'

const props = defineProps<{
  id: string | number
}>()

const loading = ref<boolean>(false)
const events = ref<Array<CalendarEvent>>()

const getList = async () => {
  loading.value = true
  const res = await StudentApi.getStudentShecdule(props.id)
  events.value = (res || []).map(item => ({
    day: item.lessonDate,
    time: `${item.startTime}-${item.endTime}`,
    name: item.className,
    extra: item,
  }))
  loading.value = false
}

const calendarRef = ref<InstanceType<typeof Calendar>>()

const jumpTody = (item) => {
  calendarRef.value?.goToday(item.day)
}

watch(() => props.id, () => getList(), { immediate: true })
</script>

<template>
  <a-spin :loading="loading" class="w-[100%]">
    <Calendar
      ref="calendarRef" :disabled="true" :events="events" :week-time-slots="[
        '08:00-10:00',
        '10:00-12:00',
        '14:00-16:00',
        '16:00-18:00',
      ]"
    />
    <!-- <template v-if="events?.length">
      <div class="mt-4 flex flex-wrap cursor-pointer gap-4">
        <p v-for="(item, index) in events" :key="index" @click="jumpTody(item)">
          <a-tag color="blue">
            {{ item.day }}
          </a-tag>
        </p>
      </div>
    </template> -->
  </a-spin>
</template>

<style lang='less' scoped>
</style>
